<template>
  <div class="wrapper">
    <swiper :options="swiperOption" v-if="showSwiper">
      <!-- slides -->
      <swiper-slide v-for="item of this.swiperList" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl">
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        swiperOption: {
          /*小圆点*/
          pagination: '.swiper-pagination',
          /*轮播*/
          loop: true
        },
        /*swiperList: [{
          id: '0001',
          imgUrl: 'https://imgs.qunarzz.com/vc/44/e9/86/95bc36c9e1c06ebd68bdfe222e.jpg_92.jpg',
        }, {
          id: '0002',
          imgUrl: 'https://imgs.qunarzz.com/vc/ad/7c/fe/037d1a400372ff57b0030d1d1c.jpg_92.jpg',
        }]*/
      }
    },
    props: {
      swiperList: {
        type: Array,
        default: []
      }
    },
    computed: {
      showSwiper() {
        return this.swiperList.length
      }
    }
  }
</script>

<style scoped lang="stylus">
  /*因为scoped限制，.swiper-pagination-bullet-active不是本页面的，所以只能用>>>*/
  .wrapper >>> .swiper-pagination-bullet-active
    background: #fff

  .wrapper
    margin-top: .86rem
    width: 100%
    height: 0
    overflow: hidden
    padding-bottom: 31.25%
    background: #eee
    /*height: 31.25vh*/
    .swiper-img
      width: 100%;
</style>
